Notre application est maintenant complète en ce que toutes les fonctionnalités essentielles ont été ajoutées, donc dans ce
projet final, Listen ajoutera des menus d'application spécifiques à la plate-forme, des raccourcis et toute autre touche finale pour
faire de notre application une expérience vraiment native par rapport au code du projet. .
Et la première chose à noter avant de commencer est que dans les versions précédentes de l'application électronique, les menus étaient
généralement créés à partir du moteur de rendu à l'aide du module distant.
Vous pouvez même toujours voir un exemple de cela dans la documentation du menu d'Electron ici.
J'ai mentionné cela comme beaucoup de réponses de dépassement de pile et d'autres ressources contiendront toujours cela, mais
c'est à éviter.
Electron se débarrasse lentement du module distant.
Donc, en sachant cela, vous créerez et implémenterez notre menu d'application directement à partir du processus principal, comme il se
doit.
Pour garder cela un peu plus modulaire et organisé, je vais séparer tout le code du menu dans un nouveau
script ou module local.
Commencez donc par créer ce fichier dans le menu principal du répertoire du projet.
Le script ou le module exportera une seule fonction par défaut pour créer l'ensemble du menu de l'application.
Commencez donc par définir l'exportation du module sur une fonction anonyme dans laquelle nous pouvons exécuter toute la logique
du menu.
Pour ce faire, le module de menu d'Electron nécessitera dès le début du menu de script d'Electron de créer à nouveau le menu
entier à partir d'un modèle de menu ou d'un objet JavaScript.
Donc, dans cette fonction, commencez par créer ce modèle, en attribuant au modèle un tableau vide pour l'instant, à la
fois le menu de ce modèle en utilisant le module de menu que nous avons requis de l'assignation électronique au menu menu dot
build à partir du modèle.
Cet objet modèle et enfin définissez ce menu résultant comme menu principal de l'application en appelant le menu de l'application de
jeu de points de menu.
C'est tout, bien que notre menu soit vide, lorsque ce module est requis et exécuté, étant donné
que nous n'exportons qu'une seule fonction, notre menu d'application personnalisé sera créé.
Nous allons faire ça depuis le Maine.
Oui bien sûr.
Alors passons à ce fichier.
Exiger le module de menu assignant à un menu, exiger dans le même menu de répertoire, cette variable de menu d'application contenant maintenant cette fonction
pour créer le menu, que nous pouvons appeler dès que la fenêtre principale est
créée ici.
En exécutant le menu de l'application, enregistrez-le pour tester tout fonctionne, et nous avons maintenant un menu d'application vide avec seulement cet élément
ajouté automatiquement par Mac, ce premier élément étant le nom de l'application sur Mac, quelque chose va changer
dans la section suivante.
Cet élément par défaut ne contient pas encore d'éléments de menu.
Donc, la prochaine étape de la création de notre menu à partir de ce modèle consiste à commencer à ajouter des éléments
de menu dans le premier emplacement de menu, à ajouter un objet d'élément de menu ou à simplement appliquer un
objet JavaScript, car il s'agit d'un modèle avec une étiquette d'éléments.
Ceci étant le menu pour contrôler toutes nos fonctionnalités d'élément d'application, je définirai un sous-menu sur cet élément de menu
dans lequel nous ajouterons les éléments de sous-menu pour cet élément de niveau supérieur à un tableau vide.
Pour l'instant, cela étant comme un élément de menu sans certains contenus ne sera pas affiché, remplira cela avec plus d'éléments de menu
dans une minute.
Ensuite, le deuxième élément de niveau supérieur que je définirai comme menu d'édition.
Si vous vous souvenez de la leçon sur les menus, c'est quelque chose que nous pouvons avoir pour nous
en attribuant des rôles d'élément de menu d'édition individuels tels que copier-coller, etc. , ou de la manière la plus simple, donnez à cet élément
de menu entier un rouleau de menu d'édition.
Ce rôle demande à Electron de créer tout le menu d'édition pour nous avec des éléments spécifiques au système d'exploitation.
Ensuite, nous pouvons ajouter le menu de la fenêtre avec une configuration de rouleau automatique similaire du menu de la fenêtre.
Et enfin, selon la convention, le menu d'aide avec un rouleau d'aide.
Ce rouleau est un peu moins complet et nous y ajouterons d'autres éléments dans une minute.
Mais encore une fois, pour qu'il apparaisse dans le menu, assignez-lui un sous-menu vide pour le moment.
Leur note, cependant, que cela ne fonctionnera pas sur Mac.
Maintenant, comme nous avons défini le premier élément de menu en tant qu'objet d'élément de menu personnalisé avec l'étiquette d'éléments et
non l'élément de menu de nom requis que nous avons déjà vu.
N'oubliez pas que Mac exige toujours que le premier élément soit le nom de l'application.
Donc, pour ajouter cet élément requis en première position pour Mac uniquement, nous devrons vérifier la plate-forme sur
laquelle l'application s'exécute, ce que nous pouvons faire si vous n'avez pas besoin de parenthèses car il s'agira d'une
simple plate-forme de processus à une seule ligne.
Cette propriété de plate-forme renvoyant soit Win32 ou 164 pour Windows, selon la version spécifique de Windows
Linux pour tous les systèmes d'exploitation Linux ou pour Mac pour ajouter ce premier élément de menu, Darwan Darwin étant le nom
d'origine du système d'exploitation d'Apple et constitue toujours le noyau de Mac OS.
OK, donc lorsque ce menu est en cours de création sur Mac, nous ajouterons cet élément de menu supplémentaire
au début du tableau de modèles, car il s'agit d'un tableau standard que nous pouvons simplement appeler le modèle et déplacer avec un autre élément de
menu configuré par rouleau du menu de l'application.
C'est tout.
Electron, ce qui le rend très simple pour nous au menu comme le menu d'édition étant une solution complète spécifiquement pour
ce premier élément de menu Mac.
Il devrait maintenant fonctionner alors économisez.
Et là, nous voyons tous les nouveaux éléments de menu avec ce premier élément, avoir les éléments de rouleau
générés automatiquement est toujours vide.
Pour l'instant, nous avons un menu d'édition très détaillé, comprenant toutes les fenêtres de commandes d'annulation, de restauration et de texture
pour gérer les fenêtres en haut.
Nous pouvons également voir la fenêtre des outils de développement ici et l'aide, qui par défaut contient un champ de recherche
spécifique à Mac et ce sous-menu vide que nous avons ajouté.
Ce sous-menu est cependant obligatoire.
Alors ajoutons-y un élément de menu multiplateforme simple.
De retour dans Menu Dutches dans ce tableau de sous-menu HELP, ajoutez une nouvelle étiquette d'objet, apprenez-en plus avec un gestionnaire de clics et qui
ouvrira simplement une URL avec plus d'informations sur l'application.
Cela peut être un site Web pour votre application ou même un lien vers la liste de l'App Store.
Gardez simplement à l'esprit que si vous souhaitez lancer le lien App Store vers votre application, il est probablement
préférable de vérifier à nouveau la plateforme et de créer un lien vers l'App Store spécifique pour le système d'exploitation de l'utilisateur.
Dans mon cas, je vais simplement lancer le dépôt d'applications sur GitHub, je souhaite le lancer dans le navigateur par défaut de
l'utilisateur.
Donc, en utilisant l'appel de module shell dans cette fonction, le point shell s'ouvre en externe à cette URL GitHub, que nous pouvons copier
à partir du JSON packagé.
Et collez sans oublier d'exiger à nouveau le module de coque de la coque d'électrons, enregistrez-le pour tester.
Je vais afficher une fenêtre de navigateur vide.
Ouvrez le menu d'aide, cliquez sur et l'URL de cet apropo a été lancée, fournissant à l'utilisateur des informations
supplémentaires sur l'application.
Je vais déplacer cela de nouveau.
Et comme mentionné précédemment, le menu Aide a également ce champ de recherche par défaut, qui est parfaitement intégré à
notre application pour trouver les fonctionnalités de l'application.
Par exemple, Typing Cut nous montre qu'un élément de menu avec ce nom existe et des liens vers plusieurs articles d'aide
connexes sur cet élément de menu, qui montre un pointeur vers où il se trouve dans le menu.
Très utile.
OK, donc c'est essentiellement tous nos éléments de menu standard qui sont faits ensuite.
Ensuite, nous pouvons passer à l'ajout de notre fonctionnalité d'élément d'application à ce sous-menu Éléments vides.
Je vais commencer par les commandes existantes comme ouvrir ou supprimer et les rendre simplement accessibles via le menu.
Premier élément ajouté.
Avec un gestionnaire de clics.
Et comme son nom l'indique, cliquer sur cet élément devrait faire la même chose que cliquer sur le bouton
plus pour ouvrir le modèle pour ajouter un nouvel élément comme celui-ci, mais nous ne pouvons évidemment pas le faire facilement à partir du script
du processeur principal.
Nous pouvons donc envoyer un simple message IPSI à sens unique à la fenêtre principale de l'application chargée de gérer
cette logique ou ces approches, pour être exact.
Rappelez-vous le html du point principal de Main Window Load et qui renvoie à des excuses, qui est responsable de montrer le
modèle.
Donc, pour envoyer un message à votre fenêtre de navigateur ou à votre instance de rendu directement à partir du processus principal à l'aide d'époxy.
Nous n'avons pas vraiment besoin d'utiliser le module époxy.
Electron gère cela en interne pour nous.
Nous pouvons simplement appeler le contenu Web de la fenêtre du navigateur.
Nous voulons envoyer un message de sorte que la fenêtre principale du contenu Web par point, la méthode d'envoi.
Sauf que pour le moment, nous n'avons pas accès à la fenêtre principale de ce module.
Nous devrons en fait le passer en argument lors de l'exécution du module.
Je vais l'appeler win ou app window, ce qui en fait le seul et unique argument de cette fonction de module.
Et puis, c'est là que nous exécutons cette configuration pour être le contenu Web de la fenêtre principale.
Ils nous donnent une référence à cette application principale, le contenu Web Windows.
Afin de l'envoyer via IPSI, nous devons toujours définir un nom de canal, qui est ce que nous utiliserons
pour identifier la tâche pour ce modèle d'affichage de menu.
Aucune donnée ou réponse n'est nécessaire.
Signification pour exécuter ce menu.
Action dans le moteur de rendu.
Nous pouvons écouter sur ce canal IPC neuf.
Je vais copier le nom du canal sur James EPOXI Renderer déjà disponible open modal à partir du menu écoute avec
IPSI Renderer activé pour ce nom de canal menu show modal passé ce un rappel à déclencher chaque fois qu'un message
est reçu dans lequel déclenchera simplement un clic sur l'élément bouton plus.
Celui-ci montre ici le modèle de clic de point.
Enregistrez tout pour tester.
Ajouter nouveau maintenant affiché sous le menu des éléments cliquez et le nouvel élément sans odeur ouvert directement à partir du menu.
Cette action étant un élément de menu, nous pouvons désormais également lui attribuer très
facilement un raccourci clavier vers Menu Doges. Définir cette nouvelle propriété d'accélérateur d'éléments de menu sur commande ou contrôle plus.
Oh la sauvegarde standard de commande ouverte.
Cet élément nous montre maintenant automatiquement dans le menu qu'il a un raccourci clavier, appuyez sur la commande étant
sur Mac.
Oh, et le nouvel élément s'affiche de la même manière que le fait de cliquer sur le bouton ou l'élément de menu, permettant aux utilisateurs de passer rapidement
à l'application, d'ouvrir le modal à partir du clavier, de coller le lien et d'appuyer sur Entrée, tout est fait sans aucun clic
de souris et une bien meilleure expérience pour les utilisateurs enclins à le faire.
La commande d'élément suivant étant alors d'ouvrir un élément ou plus spécifiquement d'ouvrir l'élément sélectionné.
Gardez à l'esprit que nous pouvons déjà parcourir les éléments avec le clavier, mais pour le moment, nous devons
encore double-cliquer pour les ouvrir.
Ajoutez ce nouvel élément de menu au sous-menu des éléments avec une étiquette d'élément lu définissant immédiatement l'accélérateur.
Cette fois, je vais lui faire commander ou contrôler.
De plus, entrez avec un gestionnaire de clic dans lequel le processus de rendu sera à nouveau envoyé.
Identique au premier élément lors de l'envoi.
Menu, élément ouvert.
A l'auditeur dans Ineptitudes.
Ouvrez l'élément sélectionné dans le menu.
Ecouter comme avant.
Copiez ce nom de chaîne.
Élément ouvert de menu dans lequel nous appellerons les éléments dot ouvrir la commande ouverte, ouvrant l'élément sélectionné par défaut,
tout enregistrer.
Je vais sélectionner le deuxième élément, pas de dossier, le nouvel élément avec une touche de raccourci est dans le menu, alors cliquez dessus.
Et l'élément sélectionné est ouvert dans une fenêtre de lecteur, fermez-le sans le supprimer, accédez au
premier élément avec le clavier, ouvrez-le avec la commande, entrez et l'heure.
Donc, tout fonctionne.
Ensuite, pour notre troisième action d'élément, nous pouvons ajouter la possibilité de supprimer manuellement un élément sans
avoir à cliquer sur le bouton terminé dans la fenêtre du lecteur, créer un autre nouvel objet de sous-menu étiqueter cet élément de suppression.
Le raccourci peut être une commande ou un contrôle, plus un retour arrière, un gestionnaire de clic pour envoyer le message lors de l'envoi d'un
élément de suppression de menu, copiez ce nom de canal pour implémenter l'écouteur.
Supprimer l'élément sélectionné du menu, comme avant, rendu ipsi dans le menu, supprimer l'élément.
Avec un rappel, nous avons à nouveau cette fonctionnalité de suppression en place avec les éléments à supprimer, mais nous
devons passer des éléments, supprimer l'index de l'élément à supprimer.
Donc, dans cette fonction de rappel, obtenez l'élément sélectionné avec les éléments, ne récupérez pas l'élément sélectionné.
Cela renvoie un objet avec l'élément d'élément sélectionné et son index.
Nous ne sommes intéressés que par l'indice.
Donc, immédiatement après la suppression de cet élément sélectionné avec des éléments, la suppression des points passe dans l'index de l'élément sélectionné.
Élément sélectionné.
Index de points.
Testez ceci.
Je vais supprimer le deuxième élément en le sélectionnant, cliquez sur ce nouvel élément de menu supprimer l'élément.
Et allé à l'arrière de l'électron G avec la commande Comando HTP s électron G dot org enter.
Et c'est tout, donc toutes les fonctionnalités étant accessibles directement à partir du clavier, nous pouvons désormais également
ajouter des fonctionnalités étendues à l'application via ce menu d'éléments.
Par exemple, autorisons l'utilisateur à ouvrir un élément dans son navigateur par défaut au lieu d'une fenêtre de lecture
dans l'application.
Encore un peu de flexibilité pour un quatrième élément de ce menu d'éléments intitulé ouvert dans le navigateur.
Faites-en un raccourci, une variante de la commande d'élément principal.
Je vais simplement ajouter une commande ou un contrôle de touche de modification supplémentaire comme auparavant, plus shift plus enter.
Donc, la commande d'élément de lecture normale avec l'ajout de maintenir également la touche Maj.
Envoyez un message au moteur de rendu sur claque.
Lorsque dot send.
Menu, élément ouvert, comme avec l'élément de menu natif, je vais copier ce nom de chaîne, ajouter un autre auditeur dans Apter
J. S ..
Ouvrir l'élément dans le navigateur natif à partir du menu.
Écoutez avec IPC Renderer.
Coller le nom de la chaîne.
Et dans le callback de cet auditeur, on peut appeler le module items open native, qui n'existe pas encore.
Alors créons cela sur deux éléments.
James, je vais ajouter cette nouvelle fonction tout en bas avec la fonction ouverte normale qui a juste un peu plus de
sens là-bas.
Ouvrez l'élément sélectionné dans le navigateur natif.
Déclarer une nouvelle fonction, exporter une fonction native ouverte équivaut à une fonction dans laquelle nous pouvons commencer par effectuer les premières étapes
exactes, comme dans cette vérification de fonction ouverte, nous avons également des éléments de retour, récupérez l'élément actuellement sélectionné et obtenez
le contenu global de ces éléments que vous sont tous des attributs de données.
Copiez ceci.
Et face à la dernière étape étant d'ouvrir ce contenu dans le navigateur par défaut des États-Unis.
En utilisant le shell, ouvrez quarrell de contenu externe, sans oublier d'exiger également que le module shell soit un module
partagé.
Je vais passer directement au début du script.
Les const utilisant l'affectation de structure nécessitent une coque de sécurité électronique pour tester.
Je ramènerai cette fenêtre de navigateur de plus tôt en vue.
Sélectionnez le deuxième élément à ouvrir dans mon navigateur par défaut.
Cliquez sur ce nouvel élément ouvert dans le navigateur et un nouvel onglet Chrome est ouvert avec l'élément électronique, vous êtes chargé exactement de
la même manière que dans notre propre fenêtre de lecteur, à l'exception de la possibilité de marquer l'élément comme terminé, permettant
simplement à l'utilisateur un certain choix sur la façon dont ils utilisent l'application.
Il y a une dernière fonction de l'application à laquelle nous ne pouvons toujours pas accéder via le clavier, c'est le champ de
recherche.
La commande par défaut pour entrer la recherche est les commandes sur Mac ou le contrôle est sur Windows et Linux.
Ajoutons donc que comme élément de menu des éléments finaux pour revenir aux doges de menu, ajoutez un nouvel objet de sous-menu.
Éléments de recherche étiquetés.
Raccourci, comme mentionné, être dans le commandement ou le contrôle plus s.
Et un gestionnaire de clic envoyant à la fenêtre de l'application.
Menu, focus, recherche, copiez le nom de la chaîne sur Abdul Aziz.
Focus sur l'entrée de recherche dans le menu.
En écoutant comme avant le focus du menu, recherchez un rappel dans lequel tout ce que nous avons à faire est de
focaliser la recherche, entrez le sélecteur ici, recherchez, dotez, concentrez-vous, enregistrez les deux fichiers.
Nous voyons ce nouvel élément dans le menu des éléments, même s'il ne sera probablement jamais utilisé à partir de là.
Donc, appuyez sur la commande et l'entrée de recherche est focalisée, ce qui signifie que je peux simplement taper ajouter un
nouvel élément avec la commande sur https jams stack dot org.
La commande consiste à rechercher à nouveau Jamm, qui ne laisse maintenant que ce nouvel élément effacer la recherche, accédez à ce dernier
élément en utilisant le centre de commande du clavier et il s'est ouvert, à quel point, une fois que l'utilisateur
en a terminé, cliquez simplement sur Terminé, fermer et supprimer l'élément de l'application.
Voilà donc notre application terminée.
Bien sûr, il y aura beaucoup d'améliorations possibles et peut-être même quelques bugs mineurs car les deux
se sont déroulés très rapidement.
Mais pour la plupart, c'est une application de bureau extrêmement bien intégrée.
Quel que soit le système d'exploitation, la section suivante du cours préparera ce projet pour l'emballage et
compilera une application distribuable à l'aide du générateur d'électrons.